<script setup>
import { inject, onMounted, ref } from 'vue'
import Image1 from '../assets/png/img/user.jpg' // 确保图片路径正确
import Image2 from '../assets/png/img/balance.png' // 确保图片路径正确
import Image3 from '../assets/png/img/warning.png' // 确保图片路径正确
import mov1 from '../assets/png/img/move.png' // 确保图片路径正确
import mov2 from '../assets/png/img/move2.png' // 确保图片路径正确
import mov3 from '../assets/png/img/move3.png' // 确保图片路径正确
import gl from '../assets/png/img/gl.png'
import dl from '../assets/png/img/dl.png'
import { onBeforeRouteLeave } from 'vue-router'
const allList = ref([
  {
    title: '业主人数',
    num: '2318'
  },
  {
    title: '访客人数',
    num: '880'
  },
  {
    title: '外来人数',
    num: '174'
  }
])
const value = ref(1)

const list = ref([
  {
    title: '监控1:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控2:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控3:T9北侧',
    time: '08.12 18',
    type: '已消警'
  },
  {
    title: '监控4:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控5:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控6:T9北侧',
    time: '08:12:18',
    type: '已消警'
  },
  {
    title: '监控7:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控8:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控9:T9北们',
    time: '08:12:18',
    type: '已消警'
  }
])
const moveList = ref([
  {
    title: '星关广场云台',
    url: mov1
  },
  {
    title: '底商北侧',
    url: mov1
  },
  {
    title: '后山艺术空间',
    url: mov1
  },
  {
    title: 'T9后面',
    url: mov2
  },
  {
    title: '门口',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  }
])
const energy = ref([
  {
    title: '本月总能耗 (单位：kw.h)',
    num: '11787'
  },
  {
    title: '本年总能耗 (单位:kw.h)',
    num: '210688'
  },
  {
    title: '本日总负荷 (单位:kw.h)',
    num: '73779'
  },
  {
    title: '本年平均能耗 (单位:kw.h)',
    num: '10127'
  },
  {
    title: '本日总电费 (单位:元)',
    num: '5646'
  },
  {
    title: '本年总电费 (单位:元)',
    num: '203231'
  }
])
const line_content = ref(null)
let echarts = inject('echarts')
var myChartLine, myChartList, myChartBar
const data_content = ref(null)
const across_bar = ref(null)
const selectValue = ref(null)
let optionBar = {
  color: [''],
  grid: {
    top: '',
    bottom: '34',
    left: '5',
    right: '10',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false,
      onZero: false
    },
    axisLabel: {
      color: '#87a0b9'
    },
    splitLine: false
  },
  yAxis: {
    axisLabel: {
      color: '#87a0b9'
    },
    axisLine: {
      show: false
    },
    splitLine: false,
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7']
  },
  series: [
    {
      type: 'bar',
      data: [140, 150, 50, 45, 125, 150, 340],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1face2' // 起始颜色
            },
            {
              offset: 0.5,
              color: '#9c59dc' // 结束颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
}
let optionPie = {
  title: [
    {
      text: '室内温度',
      textStyle: { fontSize: '14px', color: '#4a80a2' },
      top: '40%',
      left: '48%',
      textAlign: 'center'
    },
    {
      text: '65%',
      textStyle: { fontSize: '14px', color: '#27d9c8' },
      top: '55%',
      left: '48%',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      // : 130, // 45度倾斜
      startAngle: 40,
      radius: ['35', '50'],
      center: ['50%', '50%'],
      data: [
        {
          value: 130,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#2b6480' }, // 渐变起始色
                { offset: 0.5, color: '#2adfcd' }, // 渐变结束色
                { offset: 1, color: '#2b6480' } // 渐变结束色
              ]
            }
          }
        },
        { value: 50, itemStyle: { color: 'transparent' } } // 透明部分
      ],
      label: {
        show: false // 不显示标签
      }
    }
  ]
}
//指定折线图
let optionLine = {
  grid: {
    left: '0rem',
    top: '13rem',
    right: '10',
    bottom: '30rem',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3', '7-4', '7-5'],
    //设置坐标轴标签
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  lineStyle: {
    color: '#4a1b64'
  },
  series: [
    {
      data: [20, 29, 40, 33, 68, 55, 43, 33, 10],
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4a1b64' }, // 渐变起始颜色
          { offset: 1, color: '#14435c' } // 渐变结束颜色
        ])
      },
      itemStyle: {
        color: '#cd6e6e',
        borderWidth: '2px'
      }
    }
  ]
}
let optionList = {
  //修改全部柱子的颜色
  // color: ['red'],
  //修改图表大小
  grid: {
    containLabel: true,
    bottom: '0rem',
    left: '0rem',
    right: '0rem',
    top: '12'
  },
  // title: {
  //   text: '近一周访客超时楼栋分布',
  //   textStyle: {
  //     color: '#4671bc' // 设置标题颜色
  //   },
  //   left: '10%',
  //   top: '0%'
  // },
  tooltip: {
    trigger: 'item'
  },
  legend: {},
  xAxis: {
    //设置坐标刻度标签
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3'],
    //设置坐标轴标签
    axisLabel: {
      fontSize: '0.125rem', // 字体大小
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  series: [
    {
      // name: '销量'
      type: 'bar',
      data: [
        {
          value: 10,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 50,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 330,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 390,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 330,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 230,
          itemStyle: {
            color: '#4c81dd'
          }
        }
      ]
    }
  ]
}
onMounted(() => {
  myChartBar = echarts.init(across_bar.value)
  myChartBar.setOption(optionBar)
  myChartLine = echarts.init(line_content.value)
  myChartLine.setOption(optionLine)
  myChartList = echarts.init(data_content.value)
  myChartList.setOption(optionList)
  window.addEventListener('resize', function () {
    myChartLine.resize()
    myChartList.resize()
    myChartBar.resize()
  })
})
const scale = inject('scale')
const leave = ref(false)
onBeforeRouteLeave((to, from, next) => {
  leave.value = true
  setTimeout(() => {
    next()
  }, 200)
})
</script>
<template>
  <div class="security_layout">
    <div
      class="left pl"
      :style="{ '--scale-factor': scale }"
      :class="{ 'slide-in-left-leave': leave, 'slide-in-left': !leave }"
    >
      <div class="all shadow">
        <div class="all_item">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>4#天棚热泵主机</div>
          </div>
          <div class="content">
            <div class="ct_item1">
              <img class="img" :src="gl" alt="" />
              <div class="item_1">
                <div class="i1">功率</div>
                <div class="i2">211.8</div>
              </div>
              <img class="img" :src="dl" alt="" />
              <div class="item_1">
                <div class="i1">电量</div>
                <div class="i2">272322.2</div>
              </div>
            </div>
            <div style="display: flex; margin-bottom: 0.1875rem">
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行工况</div>
                <div class="ct_item2_s2">炙热</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行状态</div>
                <div class="ct_item2_s2 run">运行</div>
              </div>
            </div>
            <div style="display: flex">
              <div class="ct_item2">
                <div class="ct_item2_s1">c1启动状态</div>
                <div class="ct_item2_s2">启动</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">c2启动状态</div>
                <div class="ct_item2_s2 run">启动</div>
              </div>
            </div>
          </div>
        </div>
        <div class="all_item">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>4#天棚热泵主机</div>
          </div>
          <div class="content">
            <div class="ct_item1">
              <img class="img" :src="gl" alt="" />
              <div class="item_1">
                <div class="i1">功率</div>
                <div class="i2">211.8</div>
              </div>
              <img class="img" :src="dl" alt="" />
              <div class="item_1">
                <div class="i1">电量</div>
                <div class="i2">272322.2</div>
              </div>
            </div>
            <div style="display: flex; margin-bottom: 0.1875rem">
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行工况</div>
                <div class="ct_item2_s2">炙热</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行状态</div>
                <div class="ct_item2_s2 run">运行</div>
              </div>
            </div>
            <div style="display: flex">
              <div class="ct_item2">
                <div class="ct_item2_s1">c1启动状态</div>
                <div class="ct_item2_s2">启动</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">c2启动状态</div>
                <div class="ct_item2_s2 run">启动</div>
              </div>
            </div>
          </div>
        </div>
        <div class="all_item">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>4#天棚热泵主机</div>
          </div>
          <div class="content">
            <div class="ct_item1">
              <img class="img" :src="gl" alt="" />
              <div class="item_1">
                <div class="i1">功率</div>
                <div class="i2">211.8</div>
              </div>
              <img class="img" :src="dl" alt="" />
              <div class="item_1">
                <div class="i1">电量</div>
                <div class="i2">272322.2</div>
              </div>
            </div>
            <div style="display: flex; margin-bottom: 0.1875rem">
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行工况</div>
                <div class="ct_item2_s2">炙热</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行状态</div>
                <div class="ct_item2_s2 run">运行</div>
              </div>
            </div>
            <div style="display: flex">
              <div class="ct_item2">
                <div class="ct_item2_s1">c1启动状态</div>
                <div class="ct_item2_s2">启动</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">c2启动状态</div>
                <div class="ct_item2_s2 run">启动</div>
              </div>
            </div>
          </div>
        </div>
        <div class="all_item">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>4#天棚热泵主机</div>
          </div>
          <div class="content">
            <div class="ct_item1">
              <img class="img" :src="gl" alt="" />
              <div class="item_1">
                <div class="i1">功率</div>
                <div class="i2">211.8</div>
              </div>
              <img class="img" :src="dl" alt="" />
              <div class="item_1">
                <div class="i1">电量</div>
                <div class="i2">272322.2</div>
              </div>
            </div>
            <div style="display: flex; margin-bottom: 0.1875rem">
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行工况</div>
                <div class="ct_item2_s2">炙热</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">机组运行状态</div>
                <div class="ct_item2_s2 run">运行</div>
              </div>
            </div>
            <div style="display: flex">
              <div class="ct_item2">
                <div class="ct_item2_s1">c1启动状态</div>
                <div class="ct_item2_s2">启动</div>
              </div>
              <div class="ct_item2">
                <div class="ct_item2_s1">c2启动状态</div>
                <div class="ct_item2_s2 run">启动</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right pr"
      :class="{ 'slide-in-right-leave': leave, 'slide-in-right': !leave }"
      :style="{ '--scale-factor': scale }"
    >
      <div class="data">
        <el-select
          placement="bottom"
          v-model="selectValue"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option label="test1" value="1" />
        </el-select>
      </div>
      <div class="data_2 shadow">
        <div class="overview">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>三相电压</div>
          </div>
          <div class="content">
            <div id="across_bar" ref="across_bar"></div>
          </div>
        </div>
        <div class="statistics">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>三相电流</div>
          </div>
          <div class="content">
            <div ref="line_content" id="line_content"></div>
          </div>
        </div>
        <div class="host">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>超时访客数据</div>
          </div>
          <div>
            <div class="content">
              <div ref="data_content" id="data_content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/assets/scss/Energy.scss');
@import url('@/assets/scss/common.scss');
:deep(.el-select) {
  padding-left: 0.175rem;
}
:deep(.el-select__wrapper) {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 1px #4051d3 inset;
  height: 0.5rem;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: 0 0 0 1px #4051d3 inset;
}
:deep(.el-select-dropdown) {
  min-width: 372px !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: 0 0 0 1px #4051d3 inset;
  height: 0.5rem;
}
</style>
